import React, { useEffect, useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Image, Modal, RefreshControl, Button, Alert } from 'react-native';
import processIcon from '@/assets/images/process.png';
import { getProcessInstanceApproveRecord } from '@/apis/api';
import { useTranslation } from 'react-i18next';


const RecordItemList = ({
  visible,
  processData,
  onClose,
}) => {
  const { t } = useTranslation();
  const [title, setTitle] = useState('');
  const [approveRecord, setApproveRecord] = useState([]);
  const [loading, setLoading] = useState(false);
  const [finished, setFinished] = useState(false);
  const [refreshing, setRefreshing] = useState(false);

  const statusColorEnums = {
    '-1': 'red',
    '0': 'red',
    '1': '#00c851',
    '2': '#4285f4',
  };

  const statusTextMap = {
    '-1': '驳回',
    '0': '驳回',
    '1': '通过',
    '2': '发起',
  }

  const getStatusText = (status) => {
    return statusTextMap[String(status)] || ''
  }

  const loadData = async () => {
    try {
      setLoading(true);
      const res = await getProcessInstanceApproveRecord(processData.flowInstanceCode)
      if (res?.code == 200) {
        setApproveRecord(res?.data || []);
      }
      // const mockData = [
      //   {
      //     nodeName: '脂质',
      //     actionTime: '2025-07-08',
      //     approveName: '11',
      //     approvalContent: '测试发起',
      //     processStatus: 2
      //   },
      //   {
      //     nodeName: '脂质1',
      //     actionTime: '2025-07-08',
      //     approveName: '1122',
      //     approvalContent: '测试驳回',
      //     processStatus: 0
      //   },
      //   {
      //     nodeName: '脂质2',
      //     actionTime: '2025-07-08',
      //     approveName: '1133',
      //     approvalContent: '测试通过',
      //     processStatus: 1
      //   }
      // ];

      // setApproveRecord(mockData);
      setLoading(false);
      // setFinished(true);

    } catch (error) {
      setLoading(false);

    }
  }

  const handleConfirm = () => {
    onClose(false);
  };

  useEffect(() => {
    if (visible && processData?.flowInstanceCode) {
      loadData()
    }
  }, [visible, processData?.flowInstanceCode]);
  return (
    <Modal
      animationType='slide'
      transparent={true}
      visible={visible}
      onRequestClose={() => onClose(false)}
    >
      <View style={styles.modalContainer}>
        <View style={styles.dialogContainer}>
          <Text style={styles.title}>{t('sys_record')}</Text>
          <ScrollView style={styles.scrollableCardList}
          >
            {
              approveRecord.map((item, index) => (
                <View key={`${index}-${item.nodeName}`} style={styles.cardBox}>
                  <View style={styles.cardContainer}>
                    <View style={styles.iconLineArea}>
                      <View style={styles.processIcon}>
                        {/* <View style={styles.circleIcon}></View> */}
                        <Image source={processIcon} />
                      </View>
                      <View style={styles.connectingLine}></View>
                    </View>

                    <View style={styles.contentArea}>
                      <Text style={styles.processName}>{item.nodeName || '提交流程'}</Text>

                      <View style={styles.cardItem}>
                        <View style={[
                          styles.statusTag, { backgroundColor: statusColorEnums[String(item.processStatus)] }
                        ]}>
                          <Text style={styles.statusTagText}>{getStatusText(item.processStatus)}</Text>
                        </View>

                        <View style={styles.cardContent}>
                          <Text style={styles.cardText}>时间：{item.actionTime}</Text>
                          <Text style={styles.cardText}>审批人：{item.approvedName}</Text>
                          <Text style={styles.cardText}>审批意见：{item.approvalContent}</Text>
                        </View>
                      </View>
                    </View>
                  </View>
                </View>
              ))
            }

            {
              finished && (
                <Text style={styles.finishedText}>{t('sys_noMore')}</Text>
              )
            }
            {
              approveRecord.length === 0 && (
                <Text style={styles.finishedText}>{t('sys_noData')}</Text>
              )
            }

          </ScrollView>

          {/* <Button style={styles.confirmButton} onPress={handleConfirm} title="确定"> */}
          {/* </Button> */}
          <TouchableOpacity
            style={styles.confirmButton}
            onPress={handleConfirm}
          >
            <Text style={styles.buttonText}>{t('sys_sure')}</Text>
          </TouchableOpacity>

        </View>

      </View>

    </Modal>
  );
};

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.5)",
    justifyContent: "center",
    alignItems: "center",
  },
  dialogContainer: {
    width: '90%',
    maxHeight: '70%',
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 15,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
    textAlign: 'center',
  },
  scrollableCardList: {
    maxHeight: 400,
    backgroundColor: '#fafcff',
    marginVertical: 10
  },
  cardBox: {
    paddingHorizontal: 12,
    paddingTop: 12,
  },
  cardContainer: {
    flexDirection: 'row',
    position: 'relative',
  },
  iconLineArea: {
    flexDirection: 'column',
    alignItems: 'center',
    width: 30
  },
  processIcon: {},
  circleIcon: {
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: '#4285F4',
  },
  connectingLine: {
    flexGrow: 1,
    width: 2,
    backgroundColor: '#dcdcdc',
    marginTop: 8,
  },
  contentArea: {
    flex: 1,
    minWidth: 0
  },
  processName: {
    fontSize: 12,
    fontWeight: '600',
    color: '#2a50d7',
    marginBottom: 10,
  },
  cardItem: {
    backgroundColor: '#eef2fd',
    borderRadius: 3,
    padding: 16,
    marginBottom: 10,
  },
  cardContent: {

  },
  cardText: {
    color: '#00000099',
    fontSize: 11,
    marginBottom: 4
  },
  statusTag: {
    position: 'absolute',
    top: 5,
    right: 5,
    paddingHorizontal: 3,
    paddingVertical: 1,
    // borderRadius: 100,
  },
  statusTagText: {
    color: 'white',
    fontSize: 12,
  },
  finishedText: {
    textAlign: 'center',
    color: '#999',
    marginVertical: 10
  },
  confirmButton: {
    backgroundColor: '#fff',
    textAlign: 'center',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  buttonText: {
    fontSize: 16,
    color: '#2a50d7ff'
  },


});

export default RecordItemList;